<template>
  <vuedraggable class="wrapper" v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
         <!-- <json-tree :dataObj="item"  /> -->
      </div> 
    </transition-group>
     
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';
import JsonTree from '../../components/JsonTree.vue'
export default {
  name: 'demo1',
  components: {vuedraggable,JsonTree},
  props: {
  },
  data() {
    return {
      list: [1,2,34,4,54,5],
      list2:[
          {type:1,value:1},
          {type:2,value:2},
          {type:1,value:1},
          {type:1,value:1},
      ],
      testObj: {
        a: 'a',
        b: 'b',
        c: {
          d: 'd',
          e: 'e'
        },
        d: [1,2,3]
      }
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {
  }
}
</script>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>